<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Apple-Style Slider</title>
<link rel="stylesheet" type="text/css" href="slidernav.css" media="screen, projection" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="slidernav.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#slider').sliderNav();
		$('#transformers').sliderNav({items:['autobots','decepticons'], debug: true, height: '300', arrows: false});
	});
</script>
<style>
	/* The following styles are used only for this page - the actual plugin styles are in slidernav.css */
	* { margin: 0; padding: 0; }
	body { padding: 40px; background: #eee; font-family: Verdana, Arial; font-size: 12px; line-height: 18px; }
	a { text-decoration: none; }
	h2, h3 { margin: 0 0 20px; text-shadow: 2px 2px #fff; }
	h2 { font-size: 28px; }
	h3 { font-size: 22px; }
	pre { background: #fff; width: 460px; padding: 10px 20px; border-left: 5px solid #ccc; margin: 0 0 20px; }
	p { width: 500px; font-size: 18px; line-height: 24px; margin: 0 0 30px; }
</style>
</head>
<body>


<div id="slider">
	<div class="slider-content">
		<ul>
			<li id="a"><a name="a" class="title">A</a>
				<ul>
					<li><a href="/">Adam</a></li>
					<li><a href="/">Alex</a></li>
					<li><a href="/">Ali</a></li>
					<li><a href="/">Apple</a></li>
					<li><a href="/">Arthur</a></li>
					<li><a href="/">Ashley</a></li>
				</ul>
			</li>
			<li id="b"><a name="b" class="title">B</a>
				<ul>
					<li><a href="/">Barry</a></li>
					<li><a href="/">Becky</a></li>
					<li><a href="/">Biff</a></li>
					<li><a href="/">Billy</a></li>
					<li><a href="/">Bozarking</a></li>
					<li><a href="/">Bryan</a></li>
				</ul>
			</li>
			<li id="c"><a name="c" class="title">c</a>
				<ul>
					<li><a href="/">Calista</a></li>
					<li><a href="/">Cathy</a></li>
					<li><a href="/">Chris</a></li>
					<li><a href="/">Cinderella</a></li>
					<li><a href="/">Corky</a></li>
					<li><a href="/">Cypher</a></li>
				</ul>
			</li>
			<li id="d"><a name="d" class="title">d</a>
				<ul>
					<li><a href="/">damien</a></li>
					<li><a href="/">danny</a></li>
					<li><a href="/">denver</a></li>
					<li><a href="/">devon</a></li>
					<li><a href="/">doug</a></li>
					<li><a href="/">dustin</a></li>
				</ul>
			</li>
			<li id="e"><a name="e" class="title">E</a>
				<ul>
					<li><a href="/">eBarry</a></li>
					<li><a href="/">eBecky</a></li>
					<li><a href="/">eBiff</a></li>
					<li><a href="/">eBilly</a></li>
					<li><a href="/">eBozarking</a></li>
					<li><a href="/">eBryan</a></li>
				</ul>
			</li>
			<li id="f"><a name="f" class="title">f</a>
				<ul>
					<li><a href="/">fCalista</a></li>
					<li><a href="/">fCathy</a></li>
					<li><a href="/">fChris</a></li>
					<li><a href="/">fCinderella</a></li>
					<li><a href="/">fCorky</a></li>
					<li><a href="/">fCypher</a></li>
				</ul>
			</li>
			<li id="g"><a name="g" class="title">g</a>
				<ul>
					<li><a href="/">gdamien</a></li>
					<li><a href="/">gdanny</a></li>
					<li><a href="/">gdenver</a></li>
					<li><a href="/">gdevon</a></li>
					<li><a href="/">gdoug</a></li>
					<li><a href="/">gdustin</a></li>
				</ul>
			</li>
			<li id="h"><a name="h" class="title">h</a>
				<ul>
					<li><a href="/">hBarry</a></li>
					<li><a href="/">hBecky</a></li>
					<li><a href="/">hBiff</a></li>
					<li><a href="/">hBilly</a></li>
					<li><a href="/">hBozarking</a></li>
					<li><a href="/">hBryan</a></li>
				</ul>
			</li>
			<li id="i"><a name="i" class="title">i</a>
				<ul>
					<li><a href="/">iCalista</a></li>
					<li><a href="/">iCathy</a></li>
					<li><a href="/">iChris</a></li>
					<li><a href="/">iCinderella</a></li>
					<li><a href="/">iCorky</a></li>
					<li><a href="/">iCypher</a></li>
				</ul>
			</li>
			<li id="j"><a name="j" class="title">j</a>
				<ul>
					<li><a href="/">jdamien</a></li>
					<li><a href="/">jdanny</a></li>
					<li><a href="/">jdenver</a></li>
					<li><a href="/">jdevon</a></li>
					<li><a href="/">jdoug</a></li>
					<li><a href="/">jdustin</a></li>
				</ul>
			</li>
			<li id="k"><a name="k" class="title">k</a>
				<ul>
					<li><a href="/">kBarry</a></li>
					<li><a href="/">kBecky</a></li>
					<li><a href="/">kBiff</a></li>
					<li><a href="/">kBilly</a></li>
					<li><a href="/">kBozarking</a></li>
					<li><a href="/">kBryan</a></li>
				</ul>
			</li>
			<li id="l"><a name="l" class="title">l</a>
				<ul>
					<li><a href="/">lCalista</a></li>
					<li><a href="/">lCathy</a></li>
					<li><a href="/">lChris</a></li>
					<li><a href="/">lCinderella</a></li>
					<li><a href="/">lCorky</a></li>
					<li><a href="/">lCypher</a></li>
				</ul>
			</li>
			<li id="m"><a name="m" class="title">m</a>
				<ul>
					<li><a href="/">mdamien</a></li>
					<li><a href="/">mdanny</a></li>
					<li><a href="/">mdenver</a></li>
					<li><a href="/">mdevon</a></li>
					<li><a href="/">mdoug</a></li>
					<li><a href="/">mdustin</a></li>
				</ul>
			</li>
			<li id="n"><a name="n" class="title">n</a>
				<ul>
					<li><a href="/">ndamien</a></li>
					<li><a href="/">ndanny</a></li>
					<li><a href="/">ndenver</a></li>
					<li><a href="/">ndevon</a></li>
					<li><a href="/">ndoug</a></li>
					<li><a href="/">ndustin</a></li>
				</ul>
			</li>
			<li id="o"><a name="o" class="title">o</a>
				<ul>
					<li><a href="/">odamien</a></li>
					<li><a href="/">odanny</a></li>
					<li><a href="/">odenver</a></li>
					<li><a href="/">odevon</a></li>
					<li><a href="/">odoug</a></li>
					<li><a href="/">odustin</a></li>
				</ul>
			</li>
			<li id="p"><a name="p" class="title">p</a>
				<ul>
					<li><a href="/">pBarry</a></li>
					<li><a href="/">pBecky</a></li>
					<li><a href="/">pBiff</a></li>
					<li><a href="/">pBilly</a></li>
					<li><a href="/">pBozarking</a></li>
					<li><a href="/">pBryan</a></li>
				</ul>
			</li>
			<li id="q"><a name="q" class="title">q</a>
				<ul>
					<li><a href="/">qCalista</a></li>
					<li><a href="/">qCathy</a></li>
					<li><a href="/">qChris</a></li>
					<li><a href="/">qCinderella</a></li>
					<li><a href="/">qCorky</a></li>
					<li><a href="/">qCypher</a></li>
				</ul>
			</li>
			<li id="r"><a name="r" class="title">r</a>
				<ul>
					<li><a href="/">rdamien</a></li>
					<li><a href="/">rdanny</a></li>
					<li><a href="/">rdenver</a></li>
					<li><a href="/">rdevon</a></li>
					<li><a href="/">rdoug</a></li>
					<li><a href="/">rdustin</a></li>
				</ul>
			</li>
			<li id="s"><a name="s" class="title">s</a>
				<ul>
					<li><a href="/">sBarry</a></li>
					<li><a href="/">sBecky</a></li>
					<li><a href="/">sBiff</a></li>
					<li><a href="/">sBilly</a></li>
					<li><a href="/">sBozarking</a></li>
					<li><a href="/">sBryan</a></li>
				</ul>
			</li>
			<li id="t"><a name="t" class="title">t</a>
				<ul>
					<li><a href="/">tCalista</a></li>
					<li><a href="/">tCathy</a></li>
					<li><a href="/">tChris</a></li>
					<li><a href="/">tCinderella</a></li>
					<li><a href="/">tCorky</a></li>
					<li><a href="/">tCypher</a></li>
				</ul>
			</li>
			<li id="u"><a name="u" class="title">u</a>
				<ul>
					<li><a href="/">udamien</a></li>
					<li><a href="/">udanny</a></li>
					<li><a href="/">udenver</a></li>
					<li><a href="/">udevon</a></li>
					<li><a href="/">udoug</a></li>
					<li><a href="/">udustin</a></li>
				</ul>
			</li>
			<li id="v"><a name="v" class="title">v</a>
				<ul>
					<li><a href="/">vBarry</a></li>
					<li><a href="/">vBecky</a></li>
					<li><a href="/">vBiff</a></li>
					<li><a href="/">vBilly</a></li>
					<li><a href="/">vBozarking</a></li>
					<li><a href="/">vBryan</a></li>
				</ul>
			</li>
			<li id="w"><a name="w" class="title">w</a>
				<ul>
					<li><a href="/">wCalista</a></li>
					<li><a href="/">wCathy</a></li>
					<li><a href="/">wChris</a></li>
					<li><a href="/">wCinderella</a></li>
					<li><a href="/">wCorky</a></li>
					<li><a href="/">wCypher</a></li>
				</ul>
			</li>
			<li id="x"><a name="x" class="title">x</a>
				<ul>
					<li><a href="/">xdamien</a></li>
					<li><a href="/">xdanny</a></li>
					<li><a href="/">xdenver</a></li>
					<li><a href="/">xdevon</a></li>
					<li><a href="/">xdoug</a></li>
					<li><a href="/">xdustin</a></li>
				</ul>
			</li>
			<li id="y"><a name="y" class="title">y</a>
				<ul>
					<li><a href="/">ydamien</a></li>
					<li><a href="/">ydanny</a></li>
					<li><a href="/">ydenver</a></li>
					<li><a href="/">ydevon</a></li>
					<li><a href="/">ydoug</a></li>
					<li><a href="/">ydustin</a></li>
				</ul>
			</li>
			<li id="z"><a name="z" class="title">z</a>
				<ul>
					<li><a href="/">zdamien</a></li>
					<li><a href="/">zdanny</a></li>
					<li><a href="/">zdenver</a></li>
					<li><a href="/">zdevon</a></li>
					<li><a href="/">zdoug</a></li>
					<li><a href="/">zdustin</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>


</body>
</html>